<template>
  <div class="customer-list">
    <el-card class="box-card">
      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="客户姓名">
            <el-input v-model="searchForm.name" placeholder="请输入客户姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="searchForm.phone" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="会员等级">
            <el-select v-model="searchForm.level" placeholder="请选择会员等级">
              <el-option label="全部" value=""></el-option>
              <el-option label="普通会员" value="normal"></el-option>
              <el-option label="银卡会员" value="silver"></el-option>
              <el-option label="金卡会员" value="gold"></el-option>
              <el-option label="钻石会员" value="diamond"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 工具栏 -->
      <div class="toolbar">
        <el-button type="primary" @click="handleAdd">新增客户</el-button>
        <el-button type="success" @click="handleExport">导出数据</el-button>
      </div>

      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="customerList"
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="客户ID" width="80"></el-table-column>
        <el-table-column prop="name" label="客户姓名" width="120"></el-table-column>
        <el-table-column prop="phone" label="手机号码" width="120"></el-table-column>
        <el-table-column prop="level" label="会员等级" width="100">
          <template slot-scope="scope">
            <el-tag :type="getLevelType(scope.row.level)">
              {{ getLevelText(scope.row.level) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="points" label="积分" width="100"></el-table-column>
        <el-table-column prop="totalSpent" label="消费总额" width="120">
          <template slot-scope="scope">
            ¥{{ scope.row.totalSpent.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="orderCount" label="订单数" width="80"></el-table-column>
        <el-table-column prop="lastOrderTime" label="最近下单" width="180"></el-table-column>
        <el-table-column prop="createTime" label="注册时间" width="180"></el-table-column>
        <el-table-column label="操作" fixed="right" width="250">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="success" @click="handlePoints(scope.row)">积分</el-button>
            <el-button size="mini" type="primary" @click="handleOrders(scope.row)">订单</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="customerForm" :rules="rules" ref="customerForm" label-width="100px">
        <el-form-item label="客户姓名" prop="name">
          <el-input v-model="customerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="customerForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="customerForm.email"></el-input>
        </el-form-item>
        <el-form-item label="会员等级" prop="level">
          <el-select v-model="customerForm.level" placeholder="请选择会员等级">
            <el-option label="普通会员" value="normal"></el-option>
            <el-option label="银卡会员" value="silver"></el-option>
            <el-option label="金卡会员" value="gold"></el-option>
            <el-option label="钻石会员" value="diamond"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            v-model="customerForm.birthday"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input type="textarea" v-model="customerForm.address"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="customerForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 积分操作对话框 -->
    <el-dialog title="积分操作" :visible.sync="pointsDialogVisible" width="40%">
      <el-form :model="pointsForm" :rules="pointsRules" ref="pointsForm" label-width="100px">
        <el-form-item label="操作类型" prop="type">
          <el-radio-group v-model="pointsForm.type">
            <el-radio label="add">增加</el-radio>
            <el-radio label="subtract">扣减</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="积分数量" prop="points">
          <el-input-number v-model="pointsForm.points" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="操作说明" prop="reason">
          <el-input type="textarea" v-model="pointsForm.reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pointsDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPoints">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CustomerList',
  data() {
    // 手机号码验证
    const validatePhone = (rule, value, callback) => {
      if (value && !/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    return {
      // 搜索表单
      searchForm: {
        name: '',
        phone: '',
        level: ''
      },
      // 表格数据
      customerList: [
        {
          id: 1,
          name: '张三',
          phone: '13800138000',
          level: 'gold',
          points: 1000,
          totalSpent: 9999.99,
          orderCount: 10,
          lastOrderTime: '2024-01-01 10:00:00',
          createTime: '2023-01-01 10:00:00',
          email: 'zhangsan@example.com',
          birthday: '1990-01-01',
          address: '北京市朝阳区xxx街道xxx号',
          remark: '重要客户'
        }
      ],
      loading: false,
      
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 100,

      // 新增/编辑对话框
      dialogVisible: false,
      dialogTitle: '新增客户',
      customerForm: {
        name: '',
        phone: '',
        email: '',
        level: 'normal',
        birthday: '',
        address: '',
        remark: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入客户姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '请选择会员等级', trigger: 'change' }
        ]
      },

      // 积分操作对话框
      pointsDialogVisible: false,
      pointsForm: {
        type: 'add',
        points: 1,
        reason: ''
      },
      pointsRules: {
        type: [
          { required: true, message: '请选择操作类型', trigger: 'change' }
        ],
        points: [
          { required: true, message: '请输入积分数量', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入操作说明', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取会员等级样式
    getLevelType(level) {
      const levelMap = {
        normal: 'info',
        silver: '',
        gold: 'warning',
        diamond: 'success'
      }
      return levelMap[level] || 'info'
    },
    // 获取会员等级文本
    getLevelText(level) {
      const levelMap = {
        normal: '普通会员',
        silver: '银卡会员',
        gold: '金卡会员',
        diamond: '钻石会员'
      }
      return levelMap[level] || level
    },
    // 搜索方法
    handleSearch() {
      console.log('搜索条件：', this.searchForm)
      // TODO: 实现搜索逻辑
    },
    resetSearch() {
      this.searchForm = {
        name: '',
        phone: '',
        level: ''
      }
    },
    // 新增客户
    handleAdd() {
      this.dialogTitle = '新增客户'
      this.customerForm = {
        name: '',
        phone: '',
        email: '',
        level: 'normal',
        birthday: '',
        address: '',
        remark: ''
      }
      this.dialogVisible = true
    },
    // 编辑客户
    handleEdit(row) {
      this.dialogTitle = '编辑客户'
      this.customerForm = { ...row }
      this.dialogVisible = true
    },
    // 提交表单
    handleSubmit() {
      this.$refs.customerForm.validate(valid => {
        if (valid) {
          // TODO: 实现提交逻辑
          this.$message.success('保存成功')
          this.dialogVisible = false
        }
      })
    },
    // 积分操作
    handlePoints(row) {
      this.currentCustomer = row
      this.pointsForm = {
        type: 'add',
        points: 1,
        reason: ''
      }
      this.pointsDialogVisible = true
    },
    // 提交积分操作
    submitPoints() {
      this.$refs.pointsForm.validate(valid => {
        if (valid) {
          // TODO: 实现积分操作逻辑
          this.$message.success('积分操作成功')
          this.pointsDialogVisible = false
        }
      })
    },
    // 查看订单
    handleOrders(row) {
      // TODO: 跳转到该客户的订单列表
      this.$router.push(`/orders/list?customerId=${row.id}`)
    },
    // 导出数据
    handleExport() {
      // TODO: 实现导出逻辑
      this.$message.success('导出成功')
    },
    // 分页方法
    handleSizeChange(val) {
      this.pageSize = val
      // TODO: 重新加载数据
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // TODO: 重新加载数据
    }
  }
}
</script>

<style lang="scss" scoped>
.customer-list {
  .search-bar {
    margin-bottom: 20px;
  }

  .toolbar {
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
}
</style> 